<template>
  <div class="app">
    <Header></Header>

    <div class="tabs">
      <ul>
        <li>
          <router-link to="/goods">商品</router-link>
        </li>
        <li>
          <router-link to="/rating">评价</router-link>
        </li>
        <li>
          <router-link to="/seller">商家</router-link>
        </li>
      </ul>
      <router-view></router-view>
    </div>
    <!-- 购物车列表，注意多层嵌套 -->
    <div class="carList" v-show="$store.state.show">
      <!-- 半透明遮罩层 -->
      <div class="mask" @click="outCar"></div>
      <!-- 购物车列表 ，使用的是store种carList数据-->
      <ul>
        <h3><span>购物车</span><span @click="overCar()">清空</span></h3>
        <li v-for="item in carList" :key="item.name">
          <h4>{{ item.name }}</h4>
        
            <span class="sp1">￥{{ item.price * item.count }}</span>
             <span class="sp2"><Btns :item="item"></Btns></span> 
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex';
import Header from './views/header.vue';
import Btns from './views/tabs/btns.vue';
export default {
  components: {
    Header,
    Btns,
  },
  computed: {
    //引入store中carList，方便页面使用
    ...mapState(["carList"]),
  },
  methods:{
    ...mapMutations(["overCar","outCar"])
  }
};
</script>

<style  scoped>
.app {
  height: 100%;
  position: relative;

}

.tabs {
  height: vh;
  overflow: hidden;

}

.tabs ul {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}

.tabs li {
  height: 40px;
  line-height: 40px;
  font-weight: 500;
}



.carList {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 17, 27, 0.6);
}

.carList ul {
  position: absolute;
  bottom: 50px;
  width: 100%;
  left: 0;
  height: 200px;
  background: white;
}

.carList ul li {
  display: flex;
  padding: 3.2vw 20px;
  font-size: 14px;
  position: relative;
  

}

.carList h3 {
  background-color: #f3f5f7;
  border-bottom: 1px solid gray;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}

.carList h3 span:nth-child(1) {
  font-size: 14px;
  color: rgb(7, 17, 27);
  margin-left: 20px;
}

.carList h3 span:nth-child(2) {
  font-size: 14px;
  color: rgb(7, 17, 27);
  margin-right: 20px;
  color: rgb(0, 160, 220);
}

.carList ul li .sp1 {
  font-size: 14px;
  color: rgb(240, 20, 20);
  font-weight: 700;
  margin-left:100px;
  margin-right: 20px;
  position: absolute;
  left: 150px;

}
.carList ul li .sp2 {
  position: absolute;
  left: 300px;

}

.tabs ul>li a {
    color: black;
    text-decoration: none;
}

.tabs li a.router-link-exact-active {
    color: red;
}
</style>
